<template>
  <div class='box'>
    <!-- 编辑基本信息 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="姓名：" prop="name">
          <el-input clearable v-model="form.name" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="性别：" prop="gender">
          <el-radio-group v-model="form.gender" disabled>
            <el-radio-button label="1">男</el-radio-button>
            <el-radio-button label="2">女</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="出生日期：" prop="birthday">
          <el-date-picker v-model="form.birthday" type="date" format="YYYY/MM/DD"
        value-format="YYYY-MM-DD" placeholder="请选择出生日期" />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="手机号：" prop="phone">
          <el-input clearable v-model="form.phone" disabled placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="身高：" prop="height">
          <el-input clearable v-model="form.height" placeholder="请输入" />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="体重（kg）:" prop="weight">
          <el-input clearable v-model="form.weight" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="BMI：" prop="bmi">
          <el-input clearable v-model="form.bmi" disabled placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="腹围（cm）：" prop="chestCircumference">
          <el-input clearable v-model="form.chestCircumference" placeholder="请输入" />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="腰围（cm）：" prop="waistline">
          <el-input clearable v-model="form.waistline" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="劳动强度：" prop="laborIntensity">
          <el-select v-model="form.laborIntensity" placeholder="请选择劳动强度" v-if="showLaborIntensity">
            <el-option v-for="item in laborIntensityEnumOptions" :key="item?.id" :label="item?.name" :value="item?.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="归属组织结构：" prop="orgId">
          <el-select v-model="form.orgId" placeholder="请选择组织结构" v-if="showOrgIdDatas" disabled @change="changeOrgId">
            <el-option v-for="item in orgIdDatas" :key="item?.id" :label="item?.name" :value="item?.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="归属健康顾问：" prop="healthDoctorId">
          <!-- v-if="showHealthDoctor" -->
          <el-select v-model="form.healthDoctorId" placeholder="请选择健康顾问" disabled>
            <el-option v-for="item in healthDoctorOptions" :key="item?.id" :label="item?.name" :value="item?.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="标签：" prop="tags">
          <el-input clearable v-model="form.tags" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>
 
<script setup lang='ts'>
import { ref, reactive, onBeforeMount,watch } from "vue";
import { enumListRequest, orgOptionsRequest, healthDoctorOptionsRequest } from '@/api/common/index';
import { editBasicRequest } from '@/api/user/index';
const props = defineProps({
  userInfo: {
    type: Object
  }
});
// const { userInfo } = toRefs(props)
// console.log(props.userInfo, '详情数据-(基本信息编辑)---');
// 表单字段
const form = ref({
  id: null,
  name: null,
  gender: null,
  birthday: null,
  phone: null,
  orgId: null,
  healthDoctorId: null,
  height: null,
  weight: null,
  chestCircumference: null,
  waistline: null,
  laborIntensity: null,
  tags: null,
  bmi: null
});
form.value = {...props.userInfo as any} //获取详情 赋值
console.log(form.value,'form.value')
// 劳动强度下拉值
let laborIntensityEnumOptions = reactive([])
const showLaborIntensity = ref(true)
const getLaborIntensityEnum = async () => {
  showLaborIntensity.value = false;
  const data: any = await enumListRequest({ enumName: 'LaborIntensityEnum' });
  laborIntensityEnumOptions = data.data;
  showLaborIntensity.value = true;
};
// 组织机构下拉
let orgIdDatas = reactive([]);
const showOrgIdDatas = ref(true)
const getOrgOptionsDatas = async () => {
  showOrgIdDatas.value = false;
  const data: any = await orgOptionsRequest({ containBase: false });
  orgIdDatas = data.data;
  showOrgIdDatas.value = true;
};
// 健康顾问下拉
let healthDoctorOptions = ref([])
const showHealthDoctor = ref(true)
const getHealthDoctorOptions = async () => {
  if (form.value.orgId) {
    showHealthDoctor.value = false
    const data: any = await healthDoctorOptionsRequest({ orgId: form.value.orgId });
    healthDoctorOptions.value = data.data;
    showHealthDoctor.value = true;
  }
};
//  组织变化-》获取健康顾问枚举值
const changeOrgId = (val: any) => {
  form.value.healthDoctorId = null;
  form.value.orgId = val;
  // getHealthDoctorOptions();
}
// 保存
const SubmitForm = async () => {
  const data: any = await editBasicRequest(form.value);
  if (data.code === 2000) {
    ElMessage.success('保存成功')
  } else {
    ElMessage.error(data?.message)
  }
}
watch(() =>form.value.orgId, (newVal,oldVal)=>{
  getHealthDoctorOptions()
},{deep:true,immediate:true})

onBeforeMount(() => { });
getOrgOptionsDatas();
getLaborIntensityEnum();
// getHealthDoctorOptions();
defineExpose({ SubmitForm })
</script>
 
<style lang="scss" scoped>
.box {}
</style>